{% extends 'base.html' %}



{% block contents_inner %}
<div class="col-12">
    <div class="section-content">

        <div class="row">
            <div class="col-sm-12">
                <div class="content-details" id="pmChart" style="width: 100%; height: 600px;"></div>
            </div>
        </div>
        {% csrf_token %}
    </div>
</div>

{% endblock %}





{% block js_code %}
<script>
    var myChart = echarts.init(document.getElementById('pmChart'));

    $(document).ready(function () {
            $.ajax({
                url: '{% url 'chart:AQI_trend_analysis' %}',
                type: 'post',
                headers: {"X-CSRFToken": $("[name='csrfmiddlewaretoken']").val()},
                success: function(data) {
                    console.log(data.dates);
                    console.log(data.values);
                    var option = {
                        title: {
                            text: '中国空气质量指数趋势',
                            left: 'center'
                          },
                        xAxis: {
                            type: 'category',
                            data: data.dates
                        },
                        yAxis: {
                        type: 'value'
                        },
                        series: [
                        {
                          data: data.values,
                          type: 'line'
                        }
                        ],
                    };
                    myChart.setOption(option);
                },
                error: function(error) {
                    console.error('请求数据失败:', error);
                }
            });
    });
</script>
{% endblock %}